<template>
	<div class="registerStep">
		<div class="container">
			<div class="rows">
				<div class="title">联系人信息</div>
				<div class="row">
					<div class="label">姓名</div>
					<div class="value">
						<input type="text" v-model="form.contactName" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">身份证号</div>
					<div class="value">
						<input type="idcard" v-model="form.contactIdCard" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">联系电话</div>
					<div class="value">
						<input type="tel" v-model="form.contactPhone" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">联系手机</div>
					<div class="value">
						<input type="tel" v-model="form.contactMobile" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">电子邮箱</div>
					<div class="value">
						<input type="tel" v-model="form.contactEmail" placeholder="请输入" />
					</div>
				</div>
				<div class="row">
					<div class="label">通信地址</div>
					<div class="value">
						<input type="tel" v-model="form.contactAddress" placeholder="请输入" />
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="btn" @click="next">下一步</div>
			</div>
		</div>
		<safe-area></safe-area>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					contactName: "",
					contactIdCard: "",
					contactPhone: "",
					contactMobile: "",
					contactEmail: "",
					contactAddress: "",
				}
			}
		},
		methods: {
			next() {
				uni.navigateTo({
					url: '/pages/register/step3',
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.registerStep {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.container {
			flex: 1;
			width: 100%;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			align-items: center;

			.rows {
				width: 680rpx;
				display: flex;
				flex-direction: column;
				font-size: 26rpx;

				.title {
					padding: 32rpx 0;
					border-bottom: 1px solid $uni-border-2;
				}

				.row {
					box-sizing: border-box;
					border-bottom: 1px solid $uni-border-2;
					display: flex;
					align-items: center;

					.label {
						width: 4em;
						margin-right: 36rpx;
						flex-shrink: 0;
						height: 4em;
						display: flex;
						align-items: center;
					}

					picker {
						flex: 1;
						box-sizing: border-box;
					}

					.value {
						flex: 1;
						box-sizing: border-box;
						display: flex;
						align-items: center;

						input {
							width: 0;
							height: 4em;
							padding: 0 20rpx !important;
							box-sizing: border-box;
							flex: 1;
						}

						textarea {
							width: 0;
							height: 200rpx;
							padding: 16rpx 20rpx !important;
							box-sizing: border-box;
							appearance: none;
							outline: none;
							flex: 1;
						}
					}
				}
			}

			.footer {
				width: 100%;
				padding: 50rpx 0;
				display: flex;
				justify-content: center;
				align-items: center;

				.btn {
					width: 480rpx;
					height: 80rpx;
					border-radius: 80rpx;
					background-color: $uni-primary;
					color: white;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>